<template>
    <ve-candle :data="chartData" :settings="chartSettings" :toolbox="toolbox"></ve-candle>
</template>

<script>
  import io from 'socket.io-client'
  import 'echarts/lib/component/toolbox'
  import VeCandle from 'v-charts/lib/candle'

  // const socket = io('http://47.52.145.241:9092/',{path:'/ticker'})
//   const socket = io('ws://localhost:3000')

  export default {
    data() {
      this.toolbox = {
        feature: {
          magicType: {type: ['line', 'bar']},
          saveAsImage: {}
        }
      }
      return {
        chartSettings: {
          showDataZoom: true,
          start: 20,
          end: 100,
          showMA: true,
          showVol: true,
          legendName: {
            '日K': 'day k'
          },
          showDataZoom: true,
        },
        status: 0,
        trendType: "",
        chartData: {
          columns: ['timestamp', 'open', 'close', 'lowest', 'highest'],
          rows: []
        }
      }
    },
    mounted() {
      this.trendType = location.hash.split("=")[1];
      var veCandelBox = document.getElementById('bgColor');
      var x;
      veCandelBox.addEventListener("touchstart", (evt)=>{
        x=evt.touches[0].clientX;
      }, false)
      
      veCandelBox.addEventListener("touchmove", (evt)=>{
        var x1=evt.changedTouches[0].clientX;
        if(x1-x>0){
          this.chartData.rows.push(
            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 }
          )
        }

      }, false)
      veCandelBox.addEventListener("touchend", (evt)=>{
      }, false)
    },
    mounted() {
      this.trendType = location.hash.split("=")[1]
    },
    created() {
      // this.start()
    },
    methods: {
      start() {
        console.log('start connect')
        socket.on('connect', () => {
          console.log('客户端连接成功')
        }).on('ticker', (data) => {
          console.log(data)
          this.chartData.rows.push(JSON.parse(data))
        }).on('disconnect', () => {
          console.log('客户端连接已断开')
        })
      }
    },
    components: {
      VeCandle
    }
  }
</script>